<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../UI/swiper-7.4.1/swiper/swiper-bundle.min.css">
    <script src="../../UI/swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <style>
        html,
        body {
          position: relative;
          height: 100%;
        }
  
        body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
        }
  
        .swiper {
    width: 425px;
    height: 100px;
}  
   
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
  
          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
  
        .swiper-slide img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      </style>
    </head>
  
    <body>
      <!-- Swiper -->
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide"><img src="./image/focus3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./image/focus1.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./image/focus2.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./image/focus3.jpg" alt=""></div>
          <div class="swiper-slide"><img src="./image/focus1.jpg" alt=""></div>
        </div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
  
  
      <!-- Initialize Swiper -->
      <script>
        var swiper = new Swiper(".mySwiper", {
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      </script>
    </body>
  </html>